<template>
  <el-dialog
    @close="closeDialog"
    v-model="dialogVisible"
    :title="title"
    :width="props?.editType == '1' ? '400px' : '900px'"
  >
    <el-form
      ref="ruleFormRef"
      :label-width="props?.editType == '1' ? '70px' : '90px'"
      :class="props?.editType == '1' ? 'demo-ruleForm' : ''"
      status-icon
    >
      <el-row v-if="props?.editType == '1'">
        <el-col :span="24">
          <el-form-item label="">
            <div>
              <div style="margin: 15px auto;color: #fff">现场核查调派单</div>
<!--              <qrcode-vue
                :value="qrcode"
                :size="100"
                level="H"
                style="margin: 0 auto"
              />-->
              <el-image
                  :src="props?.shareQrUrl"
                  class="avatar"
                  style="width: 100px"
              />
              <div style="margin: 15px auto;color: #fff">识别二维码下载</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="props?.editType == '2'">
        <el-col :span="24">
          <el-form-item label="隐患内容：">
            {{ data?.content }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="隐患位置：">
            {{ data?.location }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系电话：">
            {{ data?.phone }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上报时间：">
            {{ data?.createdAt }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="隐患图片：">
            <el-image
              v-for="item in data?.fileUrls"
              :preview-src-list="srcList"
              :src="baseURL + item"
              class="avatar"
              style="height: 150px; margin: 5px"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer" v-if="props.editType == '1'">
      <el-button :icon="Download" plain type="success" @click="getDownload">
        下载
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { FormInstance } from "element-plus";
import { baseURL } from "@/util/request";
import { Download } from "@element-plus/icons-vue";
import QrcodeVue from "qrcode.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => {},
  },
  editType: {
    type: String,
    default: "",
  },
  shareUrl: {
    type: String,
    default: "",
  },
  shareQrUrl: {
    type: String,
    default: "",
  },
});

const qrcode = ref("");
const emit = defineEmits(["update:visible", "update:data", "submit"]);

const ruleFormRef = ref();
const srcList = ref([]);

const dialogVisible = computed({
  get() {
    return props.visible;
  },

  set(visible: boolean) {
    emit("update:visible", visible);
  },
});

//TODO 做成动态
const title = computed(() => {
  return props?.editType == "1" ? "分享" : "详情";
});
async function getDownload() {
  const link = document.createElement('a');
  link.href = baseURL + props.shareUrl;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  closeDialog();
}

function closeDialog() {
  resetForm(ruleFormRef.value);
  emit("update:visible", false);
  emit("submit");
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
watch(props, (value) => {
  if (props?.data) {
    srcList.value = props?.data.fileUrls.map((item: string) => baseURL + item);
  }
  if (props?.shareUrl) {
    qrcode.value = baseURL + props?.shareUrl;
  }
});
</script>

<style scoped lang="scss">
.footer {
  width: 100%;
  text-align: center;
  margin-top: 50px;
}
.upload-demo {
  width: 100%;
}
.videoWrap {
  border: 1px solid #999;
}
.el-form-item {
  margin: 0;
}
.demo-ruleForm{
  width: 240px;
  padding: 20px 0;
  background: #87ceeb;
  margin: 0 auto;
}
</style>
